<template>
  <section>
    <ul class="list">
      <li class="theader">
        <p class="w2">序号</p>
        <p>名称</p>
        <p>格式</p>
        <p>下载次数</p>
        <p>时间</p>
        <p>状态</p>
        <p class="w3">操作</p>
      </li>
      <li v-for="(item, index) in listData" :key="index" class="tbody">
        <p class="w2 number">{{Number(index) + 1}}</p>
        <p>{{item.name}}</p>
        <p>{{item.format}}</p>
        <p>{{item.downnum}}</p>
        <p>{{item.finishtime}}</p>
        <div class="status">
          <span>{{item.state}}%</span>
          <template v-if="item.state==='100'">
            <span class="finish">已完成</span>
          </template>
          <template v-else>
            <p class="progress">
              <span :style="{width: item.state + '%'}"></span>
            </p>
          </template>
        </div>
        <p class="w3 tools">
          <span @click="handleDownload(item)" class="icon iconfont icon-xiazai"></span>
          <span @click="handleDelete(item)" class="icon iconfont2 iconhuishouzhan"></span>
        </p>
      </li>
    </ul>
    <div v-if="total<=0&&showLoading" class="loading" :class="{bgColor: emptyText==='暂无数据'}">
      <loading1 :emptyText="emptyText"/>
    </div>
    <div v-if="total<=0&&!showLoading" class="loading" :class="{bgColor: emptyText==='暂无数据'}">
      {{emptyText}}
    </div>
    <!-- 分页 -->
    <div v-show="total>0" class="pagination">
      <el-pagination
        background
        @current-change="watchCurrentPage"
        :current-page.sync="ipi"
        small
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      checkAll: false,
      isIndeterminate: false,
      checkedItems: [],
      items: [],
      // 分页
      ipi: 1,
      ips: 10,
      total: 0,
      totalTxt: '',
      pageSize: 10,
      page: [
        {
          value: 5,
          label: '5'
        },
        {
          value: 10,
          label: '10'
        }, {
          value: 20,
          label: '20'
        }, {
          value: 50,
          label: '50'
        }, {
          value: 100,
          label: '100'
        }
      ],
      showLoading: true,
      emptyText: '数据加载中...',
      interval: null
    }
  },
  methods: {
    init() {
      this.getListData()
      if (this.interval !== null) {
        clearInterval(this.interval)
      }
      this.interval = setInterval(() => {
        this.showLoading = false
        this.getListData()
      }, 50000)
    },
    getListData() {
      // this.emptyText = '数据加载中...'
      this.$post(this.$Url.center.reports)
        .then(res => {
          let data = res.data || []
          if (data.length > 0) {
            this.listData = data
            this.total = data.length
          } else {
            this.emptyText = '暂无数据'
          }
        })
        .catch(err => {
          this.emptyText = '暂无数据'
        })
    },
    // 报告下载
    handleDownload(item) {
      if (item.state !== '100') {
        this.$message({
          type: 'warning',
          duration: 1000,
          message: '报告生成中'
        })
        return
      }
      this.$getBlob(this.$Url.center.reportDownload, {
        id: item.id
      }).then(res => {
        let filename =
          res.headers["content-disposition"].split(";")[1].split("=")[1] ||
          "";
        if (filename !== "") {
          if (
            !(
              filename.endsWith(".doc") ||
              filename.endsWith(".docx") ||
              filename.endsWith(".xls") ||
              filename.endsWith(".pdf")
            )
          ) {
            filename += ".pdf";
          }
        }
        let blob = new Blob([res.data]);
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, decodeURI(filename));
        } else {
          let a = document.createElement("a");
          a.download = decodeURI(filename);
          a.href = window.URL.createObjectURL(blob);
          a.click();
        }
      }).catch(err => {})
    },
    // 删除报告
    handleDelete(item) {
      this.$confirm('是否删除当前报告', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$get(this.$Url.center.reportDel, {
          id: item.id
        }).then(res => {
          if (res.status === 200) {
            this.init()
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          }
        }).catch(err => {})
      }).catch(err => {
        this.$message({
          type: 'error',
          message: res.data
        })
      })
    },
    watchPageSize(ips) {
      this.ips = ips
    },
    watchCurrentPage(ipi) {
      this.ipi = ipi
    }
  },
  beforeMount() {
    this.init()
  },
  mounted() {

  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  list-style: none;
  margin-bottom: 20px;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 1px solid $color2;
    font-size: 12px;
    &.theader {
      height: 40px;
      font-weight: bold;
      color: $color2;
      background-color: $mainColor;
    }
    &.tbody {
      min-height: 60px;
      > p {
        &.p2 {
          span {
            display: block;
          }
        }
      }
      .number {
        color: $mainColor;
      }
      .status {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        span {
          display: block;
          width: 100%;
          &.finish {
            color: $color80;
          }
        }
        .progress {
          position: relative;
          width: 100%;
          height: 6px;
          margin-top: 5px;
          border-radius: 3px;
          background-color: $mainColor;
          span {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            height: 6px;
            border-radius: 3px;
            background-color: $color52;
          }
        }
      }
      .tools {
        position: relative;
        // text-align: right;
        span {
          display: inline-block;
          margin-right: 20px;
          font-size: 24px;
          color: $mainColor;
          // vertical-align: middle;
          cursor: pointer;
          &:hover {
            color: $color52;
          }
          &.iconhuishouzhan {
            font-size: 21px;
          }
        }
      }
    }
    > p, > div {
      flex: 1;
      margin-right: 10px;
    }
    &:nth-of-type(2n) {
      background-color: $color51;
    }
  }
}
.w1 {
  flex: none !important;
  width: 20px !important;
}
.w2 {
  flex: none !important;
  width: 70px !important;
  margin-right: 20px;
  text-align: center;
}
.w3 {
  flex: none !important;
  width: 100px;
  margin-left: 10px;
  margin-right: 0 !important;
}
.loading {
  // height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  // font-weight: bold;
  // color: $color48;
  &.bgColor {
    background-color: $color51;
  }
}
</style>